<template>
  <div class="main_con">
    <TopNav></TopNav>
    <section>
      <Swiper></Swiper>
      <MainGrid></MainGrid>
      <VipSwipe></VipSwipe>
      <ShowList></ShowList>
      <TourShow></TourShow>
      <Recommend></Recommend>
    </section>

    <div class="mainGif" @click="GoDetail">
      <img :src="gitData?gitData.pic:''" alt />
    </div>
  </div>
</template>

<script>
import TopNav from "../components/main/topNav";
import Swiper from "../components/main/swiper";
import MainGrid from "../components/main/cmainrid";
import VipSwipe from "../components/main/vipSwipe";
import ShowList from "../components/main/showList";
import TourShow from "../components/main/tourShow";
import Recommend from "../components/main/recommend";

import { mapState, mapGetters } from "vuex";
export default {
  components: {
    TopNav,
    Swiper,
    MainGrid,
    VipSwipe,
    ShowList,
    TourShow,
    Recommend,
  },
  data() {
    return {
      page: 1,
    };
  },
  computed: {
    ...mapState("main", ["gitData"]),
  },
  async mounted() {
    this.$store.dispatch("main/setShowBtoNav", true);
    this.$store.dispatch("main/setMainGit");
    this.$store.dispatch("main/setVipHomeList");
    this.$store.dispatch("main/setHotsRecommendList");
    this.$store.dispatch("main/setTourShowList");
    this.$store.dispatch("main/setRecommendList", this.page);

    document.addEventListener("scroll", this.scrollMoreData, false);
  },
  methods: {
    async scrollMoreData() {
      const oDiv = document.querySelector(".main_con");
      const scrollTopHeight =
        document.documentElement.scrollTop || document.body.scrollTop; //滚动高度
      const clientHeight =
        document.documentElement.clientHeight || window.screen.availHeight; //屏幕可用工作区高度
      const offsetHeight = oDiv.offsetHeight; //网页可见区域高(包括边线的宽)

      if (scrollTopHeight + clientHeight + 400 >= offsetHeight) {
        this.page += 1;
        this.$store.dispatch("main/setRecommendList", this.page);
      }
    },
     GoDetail(){
         this.$router.push({path:'/detail'})
     }
  },
  destroyed() {
    document.removeEventListener("scroll", this.scrollMoreData, false);
  },
};
</script>

<style lang='scss' scoped>
section {
  overflow-y: auto;
  padding-bottom: 1.2rem;
}
.mainGif {
  position: fixed;
  right: 0.7rem;
  bottom: 1.2rem;
  width: 1rem;
  height: 1rem;
  z-index: 1;
  img {
    width: 100%;
  }
}
</style>
